<style>
    .swithTag{
        cursor: pointer;
    }
    .panelX {
        border:1px solid RGB(51,122,183);
        box-shadow: 1px 3px 3px -1px gray;
        border-radius: 4px;
    }
    .panelX:hover {
        box-shadow: 4px 4px 3px -1px gray;
    }
    .panel-heading {
        color: white;
        background-color: RGB(51,122,183);
        /*border-bottom: 1px solid lightgray;*/
    }
    .tagHidden{
        color: black;
        border:0px;
        background-color: RGB(250,250,250);
    }
</style>
<div id="goodsAdd" class="row rowSet" style=" height:100%;margin: 0px;padding: 0px;"  xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"  >
    <div id="bodyFrame"  class="panel panel-default" style="padding: 0px;border-radius: 0px;">
        <div id="topBody"  class="panel-heading" style="padding: 10px">
            <h3 class="panel-title pull-left" > 修改实体 </h3>
            <button type="button" v-on:click="jumpToList()" class="btn btn-primary pull-right" style="margin-top: -7px">返回</button>
            <br/>
        </div>
        <div   id="centerBody" class="panel-body" style="margin-left: 5px;margin-right: 5px;margin-top: 5px;">
            <div class="col-md-12 column" style="margin-bottom: 20px" >
                <div class="panelX" style="margin: 0px">
                    <div :class="['panel-heading','swithTag',{'tagHidden': !groupHidden.main}]"  @click="openBody('main')">
                        <h3 class="panel-title">
                            {{groupHidden.main ? '-' : '+'}}
                            商品配置
                        </h3>
                    </div>
                    <div class="panel-body" v-show="groupHidden.main">
                        <!--主信息部分-->
                        <div class="col-md-12 column"   >
                                <div class="form-group col-md-6"  >
                                    <label for="inputFile0" class="col-md-2 control-label" style="text-align: right">商品ID：</label>
                                    <div class="col-md-10">
                                        <input type="text"  v-model="goodsDto.goodsMainDao.id"   class="form-control" id="inputFile0" disabled="disabled"/>
                                    </div>
                                </div>
                                <div class="form-group col-md-6" >
                                    <label for="inputFile1" class="col-md-2 control-label" style="text-align: right">商品名称：</label>
                                    <div class="col-md-10">
                                        <input type="text"   v-model="goodsDto.goodsMainDao.name"   class="form-control" id="inputFile1" />
                                    </div>
                                </div>
                                <div class="form-group col-md-6"  >
                                    <label for="goodsVenderName" class="col-md-2 control-label" style="text-align: right">商品厂商：</label>
                                    <div class="col-md-10">
                                        <input type="text" class="form-control" id="goodsVenderName"  v-model="goodsDto.goodsMainDao.venderName"  autocomplete="off" />
                                        <input type="hidden" class="form-control"  v-model="goodsDto.goodsMainDao.venderId"  />
                                    </div>
                                </div>
                                <div class="form-group col-md-6" >
                                    <label for="inputFile3" class="col-md-2 control-label" style="text-align: right">状态：</label>
                                    <div class="col-md-10">
                                        <select   v-model="goodsDto.goodsMainDao.state"  class="form-control" id="inputFile3"  >
                                            <option   value="0">编辑</option>
                                            <option   value="1">起用</option>
                                            <option   value="2">停用</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-6" >
                                    <label for="inputFile4" class="col-md-2 control-label" style="text-align: right">商品描述：</label>
                                    <div class="col-md-10">
                                        <textarea  class="form-control"  id="inputFile4"   v-model="goodsDto.goodsMainDao.goodsInfo" ></textarea>
                                    </div>
                                </div>

                            <div class="form-group col-md-6" >
                                <label for="inputFile5" class="col-md-2 control-label" style="text-align: right">产品类型：</label>
                                <div class="col-md-10">
                                    <!--待选类型队列-->
                                    <select class="form-control" id="inputFile5"  v-model="goodsDto.goodsMainDao.goodsType"  >
                                        <template v-for="goodsType in dicts.GoodsType.list" >
                                            <option v-if="goodsType.codeCode == goodsDto.goodsMainDao.goodsType"  v-bind:value="goodsType.codeCode" selected>{{goodsType.codeValue }}</option>
                                            <option v-else v-bind:value="goodsType.codeCode">{{goodsType.codeValue }}</option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-6" >
                                <label for="inputFile6" class="col-md-2 control-label" style="text-align: right">包装外形：</label>
                                <div class="col-md-10">
                                    <!--待选类型队列-->
                                    <select class="form-control" id="inputFile6"  v-model="goodsDto.goodsMainDao.groupType"  >
                                        <template v-for="groupType in dicts.GroupType.list" >
                                            <option v-if="groupType.codeCode == goodsDto.goodsMainDao.groupType"  v-bind:value="groupType.codeCode" selected>{{groupType.codeValue }}</option>
                                            <option v-else v-bind:value="groupType.codeCode">{{groupType.codeValue }}</option>
                                        </template>
                                    </select>
                                </div>
                            </div>

                        </div><!--第一行end-->

                    </div>
                </div>
            </div>
            <!--详细信息部分-->
            <div class="col-md-12 column" style="margin-bottom: 20px" >
                <div class="panelX" style="margin: 0px">
                    <div :class="['panel-heading','swithTag',{'tagHidden': !groupHidden.info}]" @click="openBody('info')">
                        <h3 class="panel-title">
                            {{groupHidden.info ? '-' : '+'}}
                            商品详细资料
                        </h3>
                    </div>
                    <div class="panel-body" v-show="groupHidden.info">
                        <li v-for="(item, index) in goodsDto.goodsItemDetailDaoList" style="list-style-type:none">
                            <div class="form-group col-md-6">
                                <label for="inputFile-detail-{{index}}" class="col-md-2 control-label" style="text-align: right">{{item.itemName}} : </label>
                                <div class="col-md-10">
                                    <input type="text"  v-model="item.itemValue"  class="form-control" id="inputFile-detail-{{index}}" />
                                </div>
                            </div>
                        </li>
                    </div>
                </div>
            </div>

            <!--型号部分-->
            <div class="col-md-12 column" style="margin-bottom: 20px" >
                <div class="panelX" style="margin: 0px">
                    <div :class="['panel-heading','swithTag',{'tagHidden': !groupHidden.modal}]" @click="openBody('modal')">
                        <h3 class="panel-title">
                            {{groupHidden.modal ? '-' : '+'}}
                            商品型号
                        </h3>
                    </div>
                    <div class="panel-body" v-show="groupHidden.modal" style="padding: 0px">
                        <!--照片展示列表-->
                        <table class="table table-bordered table-hover table-condensed">
                            <thead>
                            <tr>
                                <th>图片</th>
                                <th>型号名称</th>
                                <th>外形</th>
                                <th>计量单位</th>
                                <th>单位权重(斤)</th>
                                <th>单位净重(去皮)(斤)</th>
                                <th>条形码</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in goodsDto.goodsModelDetailDaoList">
                                <td width="10%">
                                    <img :src="$ImageUrl(item.imgId,'small')"   class="img-thumbnail"  />
                                </td>
                                <td width="20%">
                                    <input type="text"  v-model="item.name"  class="form-control"   />
                                </td>
                                <td width="5%">
                                    <select class="form-control" v-model="item.contourId" v-on:change="contourChange(item)">
                                        <template v-for="contourItem in dicts.ContourItem.list" >
                                            <option v-if="contourItem.id == item.contourId"  v-bind:value="contourItem.id" selected>{{ contourItem.codeValue }}</option>
                                            <option v-else v-bind:value="contourItem.id">{{ contourItem.codeValue }}</option>
                                        </template>
                                    </select>
                                </td>
                                <td width="5%">
                                    <select class="form-control" v-model="item.specId" v-on:change="specChange(item)">
                                        <template v-for="specItem in dicts.SpecItem.list" >
                                            <option v-if="specItem.id == item.specId"  v-bind:value="specItem.id" selected>{{specItem.codeValue }}</option>
                                            <option v-else v-bind:value="specItem.id">{{specItem.codeValue }}</option>
                                        </template>
                                    </select>
                                </td>
                                <td width="10%">
                                    <input type="number"  v-model="item.size"  class="form-control"   />
                                </td>
                                <td width="10%">
                                    <input type="number"  v-model="item.realSize"  class="form-control"   />
                                </td>
                                <td width="20%">
                                    <input type="input"  v-model="item.barCode"  class="form-control"   />
                                </td>
                                <td width="20%">
                                    <button type="button" class="btn btn-link"  v-on:click="deleteModel(index)">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--<hr>-->
                        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#imgSelModal" v-on:click="clickModel()">添加型号</button>
                    </div>
                </div>
            </div>

            <!-- 类型部分 -->
            <div class="col-md-12 column" style="margin-bottom: 20px" >
                <div class="panelX" style="margin: 0px">
                    <div :class="['panel-heading','swithTag',{'tagHidden': !groupHidden.type}]" @click="openBody('type')">
                        <h3 class="panel-title" >
                            {{groupHidden.type ? '-' : '+'}}
                            客户人群标签
                        </h3>
                    </div>
                    <div class="panel-body" v-show="groupHidden.type" style="padding:0px;">
                        <!--类型列表-->
                        <table class="table table-bordered table-hover table-condensed">
                            <thead>
                            <tr>
                                <th>id</th> <th>标签名称</th>  <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in goodsDto.goodsTypeDetailDaoList">
                                <td width="10%">
                                    {{item.type}}
                                </td>
                                <td width="30%">
                                    <!--待选类型队列-->
                                    <select class="form-control" v-model="item.type" v-on:change="typeChange(item)" >
                                        <template v-for="customerTag in dicts.CustomerTag.list" >
                                            <option v-if="customerTag.codeCode == item.type"  v-bind:value="customerTag.codeCode" selected>{{customerTag.codeValue }}</option>
                                            <option v-else v-bind:value="customerTag.codeCode">{{customerTag.codeValue }}</option>
                                        </template>
                                    </select>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-link"  v-on:click="deleteType(index)">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--<hr>-->
                        <button type="button" class="btn btn-link"   v-on:click="addType()" >添加类型</button>
                    </div>
                </div>
            </div>

            <!--图片部分-->
            <div class="col-md-12 column" style="margin-bottom: 10px" >
                <div class="panelX" style="margin: 0px">
                    <div :class="['panel-heading','swithTag',{'tagHidden': !groupHidden.img}]" @click="openBody('img')">
                        <h3 class="panel-title">
                            {{groupHidden.img ? '-' : '+'}}
                            商品图片资料
                        </h3>
                    </div>
                    <div class="panel-body" v-show="groupHidden.img" style="padding: 0px">
                        <!--照片展示列表-->
                        <table class="table table-bordered table-hover table-condensed">
                            <thead>
                            <tr>
                                <th>图片</th> <th>顺序</th> <th>位置</th> <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in goodsDto.goodsImgDetailDaoList">
                                <td width="10%">
                                    <img :src="$ImageUrl(item.imgId,'small')"   class="img-thumbnail"  />
                                </td>
                                <td width="20%">
                                    <input type="number"  v-model="item.goodsDesc"  class="form-control"   />
                                </td>
                                <td width="20%">
                                    <select class="form-control" v-model="item.place"   >
                                        <option value="0">主图</option>
                                        <option value="1">附属资料</option>
                                        <option value="2">详细资料</option>
                                    </select>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-link"  v-on:click="deleteImg(index)">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--<hr>-->
                        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#imgSelModal" v-on:click="clickImg()">添加图片</button>
                    </div>
                </div>
            </div>
        </div>
        <div   id="bottomBody" class="panel-footer" style="background-color: white;">
            <button type="button" v-on:click="submit" class="btn btn-primary btn-lg btn-block "  v-if="isShow">提交保存</button>
            <!--&lt;!&ndash;保存按钮&ndash;&gt;-->
            <!--<div class="col-sm-offset-2 col-md-8 column" >-->
                 <!---->
            <!--</div>-->
        </div>
    </div>
</div>

<script src="/js/common/vue-const.js"></script>
<script>
    $(document).ready(function(){
        //采用vue
        var goodsAdd=new Vue({
            el: '#goodsAdd',
            data: {
                //提交的url
                submitUrl: Vue.prototype.getUrl('/product/goods/saveGoods'),
                dictUrl: Vue.prototype.getUrl('/config/dict/findByType'),
                venderQueryUrl: Vue.prototype.getUrl('/product/vender/findByCondition'),
                goodsQueryUrl: Vue.prototype.getUrl('/product/goods/getGoods/'),
                goodsDto:{
                    goodsMainDao:{
                        id:null,
                        name:'', //名称
                        venderId:null, //厂商id
                        venderName:'', //厂商名称
                        goodsInfo:'',
                        state:'0',//状态
                    },
                    goodsItemDetailDaoList:[],
                    goodsImgDetailDaoList:[],
                    goodsModelDetailDaoList:[],
                    goodsTypeDetailDaoList:[],
                },
                //字典对象列表
                dicts:{
                    GoodsType:{ list:[], map:new Map()},
                    GroupType:{ list:[], map:new Map()},
                    GoodsItem:{ list:[], map:new Map()},
                    ContourItem:{ list:[], map:new Map()},
                    SpecItem:{ list:[], map:new Map()},
                    CustomerTag:{ list:[], map:new Map()},
                },
                filePath : '',
                isEdit : false,
                isShow : true,
                //对五个模块的显示与隐藏
                groupHidden : {
                    main:true,
                    info:true,
                    modal:true,
                    type:true,
                    img:true,
                },
                selectPlace:0, //0 图片队列  1型号队列
            },
            methods: {
                clickImg:function () {
                    this.selectPlace=0;
                },
                clickModel:function () {
                    this.selectPlace=1;
                },
                specChange:function(item){
                    item.specName = this.dicts.SpecItem.map[item.specId].codeValue;
                },
                typeChange:function(item){
                    item.typeName  = this.dicts.GoodsType.map[item.type].codeValue;
                },
                contourChange:function(item){
                    item.contourName =this.dicts.ContourItem.map[item.contourId].codeValue;
                },
                submit: function() {
                    if(!this.submitCheck()){ //数据校验
                        return false;
                    }
                    //走提交流程
                    this.$http.post(this.submitUrl,this.goodsDto).then(function(data){
                        if(data.data.success){
                            this.isShow = false;
                            alert("保存成功");
                            //更新厂商id
                            //this.goodsDto.goodsMainDao.id = data.data.data[0].goodsMainDao.id;
                        }else{
                            alert("保存失败："+data.data.errorMessage);
                        }

                    }).catch(function(e){
                        alert('服务器异常！'+e);
                    });

                },
                //切换开启状态
                openBody:function(index) {
                    var swch = !this.groupHidden[index];
                    console.log('切换状态!!' + swch);
                    this.groupHidden[index] = swch;
                    //this.$set('groupHidden['+index+']', swch);
                    console.log('切换状态为' + this.groupHidden[index]);
                },
                jumpToList:function() {
                    //加载页面
                    loadPageToBodyMain('/show/product/goods/goodsList');
                },
                deleteModel:function(index){
                    if(confirm('确定删除此型号？')){
                        this.goodsDto.goodsModelDetailDaoList.splice(index,1);
                    }
                },
                deleteType:function(index){
                    if(confirm('确定删除此类型？')){
                        this.goodsDto.goodsTypeDetailDaoList.splice(index,1);
                    }
                },
                deleteImg:function(index){
                    if(confirm('确定删除此照片？')){
                        this.goodsDto.goodsImgDetailDaoList.splice(index,1);
                    }
                },
                //提交表单前的验证
                submitCheck:function(){
                    //1 校验主信息
                    if(this.goodsDto.goodsMainDao.name.trim().length == 0){
                        alert('商品名称不能为空！');
                        return false;
                    }else if(this.goodsDto.goodsMainDao.venderId == null){
                        alert('商品厂商不能为空！');
                        return false;
                    }
                    //2 校验明细信息
                    var itemList = this.goodsDto.goodsItemDetailDaoList;
                    for(var i = 0 ; i < itemList.length ; i++ ){
                        if(itemList[i].itemValue.trim().length == 0){
                            alert(itemList[i].itemName+'不能为空！');
                            return false;
                        }
                    }
                    //3 校验图信息
                    var imgList = this.goodsDto.goodsImgDetailDaoList;
                    var  ishaveMain = false;
                    for(var i = 0 ; i < imgList.length ; i++ ){
                        if(imgList[i].place == 0){
                            ishaveMain = true;
                            break;
                        }
                    }
                    if(!ishaveMain){
                        alert('至少选择一张主图！');
                        return false;
                    }
                    //4 校验模块信息
                    var modelList=this.goodsDto.goodsModelDetailDaoList;
                    if(modelList.length == 0){
                        alert('至少有一条型号信息！');
                        return false;
                    }
                    for(var i = 0 ; i < modelList.length ; i++ ){
                        if(modelList[i].size <= 0 || modelList[i].size <= 0){
                            alert('型号对应权重和净重不能为空！');
                           return false;
                        }else if(modelList[i].name.trim().length == 0){
                            alert('型号对应名称不能为空！');
                            return false;
                        }
                        if(modelList[i].specId == null){
                            alert('型号对应规格不能为空！');
                            return false;
                        }

                        if(modelList[i].contourId == null){
                            alert('型号对应外形不能为空！');
                            return false;
                        }

                        if(modelList[i].barCode == null){
                            alert('型号条形码不能为空！');
                            return false;
                        }
                    }
                    //5校验商品类型
                    var typeList=this.goodsDto.goodsTypeDetailDaoList;
                    if(typeList.length == 0){
                        alert('至少有一条类型信息！');
                        return false;
                    }
                    for(var i = 0 ; i < typeList.length ; i++ ){
                        if(typeList[i].type == null){
                            alert('商品类型不能为空！');
                            return false;
                        }
                    }
                    return true;
                },
                addType:function(){
                    var goodsTypeDetailDao = {
                        id:null,
                        parentId:null,
                        type:null,
                        typeName:'',
                    }
                    this.goodsDto.goodsTypeDetailDaoList.push(goodsTypeDetailDao);
                },
                //加载商品详细信息列表页
                initDetail:function () {
                    console.log('initDetail');
                    var goodsItemList = this.dicts.GoodsItem.list;
                    for(var i =0;i<goodsItemList.length;i++){
                        //判断是否已经存在对象
                        if(this.isHaveItem(goodsItemList[i].id)){
                            continue;//跳过
                        }
                        //组装对象放入list
                        var goodsItemDetailDao = {
                            id:null,
                            parentId:null,
                            itemConfigId:goodsItemList[i].id,
                            itemName:goodsItemList[i].codeValue,
                            itemValue:''
                        }
                        console.log(goodsItemDetailDao);
                        //加入
                        this.goodsDto.goodsItemDetailDaoList.push(goodsItemDetailDao);
                    }
                },
                //判断是否已经存在
                isHaveItem:function(itemConfigId){
                    for(var i=0;i<this.goodsDto.goodsItemDetailDaoList.length;i++){
                        if(this.goodsDto.goodsItemDetailDaoList[i].itemConfigId == itemConfigId){
                            return true;
                        }
                    }
                    return false;
                },
                loadByGoodsId:function(id){
                    //发请求获取字典内容
                    console.log('loadByGoodsId');
                    this.$http.post(this.goodsQueryUrl+id).then(function(data){
                        console.log(this.goodsQueryUrl+': '+data.data.success);
                        console.log('------------------: '+ JSON.stringify( data.data.data));
                        if(data.data.success){
                           this.goodsDto = data.data.data;
                           //重置明细
                           this.initDetail();
                            console.log('loadByGoodsId end!');

                            //调整提交的url为修改
                            this.submitUrl= Vue.prototype.getUrl('/product/goods/updateGoods');
                        }else{
                            alert("查询商品失败："+data.data.errorMessage);
                        }
                    }).catch(function(e){
                        alert('服务器异常！'+ e);
                    });
                },
                selectedImg:function(imgId){
                    //如果是图片选择
                    if(this.selectPlace == 0){
                        var imgList = this.goodsDto.goodsImgDetailDaoList;
                        //配置图片
                        var goodsImgDetailDao = {
                            id:null,
                            imgId:imgId,
                            parentId:null,
                            goodsDesc:imgList.length,
                            place:0
                        };
                        //加入
                        imgList.push(goodsImgDetailDao);
                        console.log(goodsImgDetailDao);
                    }else{
                        var modelList = this.goodsDto.goodsModelDetailDaoList;
                        //配置图片
                        var goodsModelDetailDao = {
                            id:null,
                            imgId:imgId,
                            name:'',
                            specId:null,
                            specName:'',
                            contourId:null,
                            contourName:'',
                            size:0,
                            realSize:0,
                        };
                        //加入
                        modelList.push(goodsModelDetailDao);
                        console.log(goodsModelDetailDao);
                    }
                },
            },

            created: function () {

                //填充字典数据
                var that_ = this;
                this.$loadDicts(this.dicts,function(codeType){
                    if(codeType == 'GoodsItem'){ //加载此字典时重载
                        that_.initDetail();
                    }
                });
                //重写图片选择回调方法
                Vue.prototype.selectedImg = function(imgId){
                    that_.selectedImg(imgId);
                };

            },
        });


        //重写厂商自动下拉方法
        Vue.prototype.$registerVenderAuto('#goodsVenderName',function(dataValue,realValue) {
            goodsAdd.goodsDto.goodsMainDao.venderId = realValue; //设置id的值
            goodsAdd.goodsDto.goodsMainDao.venderName = dataValue; //设置id的值
        });


        //判断是否是修改
        if(sessionStorage.editId!=null && sessionStorage.editId!='null'){
            console.log('goodsId=>'+sessionStorage.editId);
            goodsAdd.loadByGoodsId(sessionStorage.editId);
            sessionStorage.editId = null;
        }
    });
</script>
<!--
</body>
</html>
-->